<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="referrer" content="no-referrer" />
    <title>Vue实例</title>
    <script src="http://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="app">
        <span :title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <p v-if="seen">现在你看到我了</p>
        <div>
            <div v-for="item,index in todos">
                {{item.text}} {{index}}
            </div>
        </div>
        <button @click="reverseMessage">反转消息</button>
        <div>{{message}}</div>
        <input v-model="message">
    </div>
</body>
</html>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'页面加载于' + new Date().toLocaleString(),
            seen: true,
            todos:[
                {text:'学习JavaScript'},
                {text:'学习整个Vue'},
                {text:'整个牛项目'}
        ]
        },
        methods:{
            reverseMessage:function(){
                console.log(this)
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>